<template>
    <div>
        <top :navNum = navNum></top>
        <div id="commend">
        <div class="container">
            <div class='percent'>
                <div class='percentContainer'>
                    <div class='num'>
                        <div class='bigNum'>{{seller.score}}</div>
                        <div class='subNum'>综合评分</div>
                        <div class='desc'>高于周边商家{{seller.rankRate}}%</div>
                    </div>
                </div>
                <div class='service'>
                    <ul class='serviceContainer'>
                        <li class='item'> 
                            <div class='title'>服务态度</div>
                            <ul class='starArea'>
                                <star :score=seller.serviceScore instance = '0' size='36'></star>
                            </ul>
                            <div class='result' style="color:rgb(255,153,0)">{{seller.serviceScore}}</div>
                        </li>
                        <li class='item'> 
                            <div class='title'>商品评分</div>
                            <ul class='starArea'>
                                <star :score=seller.foodScore instance = '0' size='36'></star>
                                
                            </ul>
                            <div class='result' style="color:rgb(255,153,0)">{{seller.foodScore}}</div>
                        </li>
                        <li class='item'>
                            <div class='title'>送达时间</div>
                            <div class='time'>{{seller.deliveryTime}}分钟</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class='classify'>
                <ul>
                    <li @click='allList'>全部 {{ratingList.length}}</li>
                    <li @click='goodList'>满意 {{goodNum}}</li>
                    <li @click='badList'>不满意 {{badNum}}</li>
                </ul>
                <div class='select' ref='icon'  @click='contentList'>
                    <div class='layout-check_circle' ></div>
                    <div class='desc'>只看有内容的评价</div>
                </div>
            </div>
            <div class='list'>
                <ul class='details'>
                    <li class='item' v-for="item in lastList" :key = item.rateTime>
                        <div class='avatar' :style= "{'background-image':'url(' + item.avatar + ')'}">
                        </div>
                        <div class='content'>
                            <div class='nameAndTime'>
                                <div class='name'>{{item.username}}</div>
                                <div class='time'>{{dayjsFormat(item.rateTime)}}</div>
                            </div>
                            <div class='starAndtrans'>
                                <ul class='starList'>
                                <!-- 星星 -->
                                    <star :score = item.score instance='12' size='24'></star>
                                </ul>
                                <div class='trans' v-if="item.deliveryTime">{{item.deliveryTime}}分钟到达</div>
                            </div>
                            <div class='desc'>
                                {{item.text}}
                            </div>
                            <div class='goods'>
                                <div :class='["isLike", item.rateType === 0 ? "layout-thumb_up" : "layout-thumb_down"]'></div>
                                <ul class='goodsList'>
                                    <li class='goodsItem' v-for="(good,index) in item.recommend" :key="index">{{good}}</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
    
        </div>
        </div>
    </div>
</template>

<script>
import {mapState,mapActions} from "vuex";
import dayjs from 'dayjs'
export default {
    data() {
        return {
            navNum:2,
            lastList:[],//最终渲染的数组
        };
    },
    computed: {
        ...mapState(['ratingList','seller']),
        //满意的数量
        goodNum(){
            return this.ratingList.filter(item => item.rateType === 0).length
        },
        //不满意的数量
        badNum(){
            return this.ratingList.length - this.ratingList.filter(item => item.rateType === 0).length
        },
    },
    methods: {
        ...mapActions(["getRatingsList"]),
        //格式化日期
        dayjsFormat(time){
            const {$y,$M,$D,$H,$m,$s} = dayjs(time);
            return `${$y}-${$M}-${$D} ${$H}:${$m}:${$s}`
        },
        //点击全部显示所有评论
        allList(){
            this.lastList = this.ratingList;
            this.$refs.icon.style.color = ''
        },
        //点击满意显示满意评论
        goodList(){
            this.lastList = this.ratingList.filter(item => item.rateType === 0)
            this.$refs.icon.style.color = ''
        },
        //点击不满意显示不满意评论
        badList(){
            this.lastList = this.ratingList.filter(item => item.rateType === 1)
            this.$refs.icon.style.color = ''
        },
        //点击有内容评价显示有内容评价 图标颜色变化
        contentList(){
            this.lastList = this.ratingList.filter(item => item.text !== '')
            this.$refs.icon.style.color = '#00a0dc'
        }
    },
    async mounted() {
        const data = await this.getRatingsList();
        this.lastList = [...data];
    },
    }
</script>
<style scoped>
    .container{
        background-color: #f3f5f7;
    }
    .container .percent{
        background-color: #fff;
        display: flex;
        border-bottom: 1rem solid rgb(176, 180, 184);
    }
    .container .percent .percentContainer{
        width: 275rem;
    }
    .container .percent .percentContainer .num{
        margin: 36rem auto;
        text-align: center;
        border-right: 1px solid rgb(176, 180, 184);
    }
    .container .percent .percentContainer .num .bigNum{
        font-size: 48rem;
        color: rgb(255, 153, 0);
        line-height: 56rem;
    }
    .container .percent .percentContainer .num .subNum{
        font-size: 24rem;
        color: rgb(7, 17, 27);
        line-height: 24rem;
        margin: 12rem 0 16rem;
    }
    .container .percent .percentContainer .num .desc{
        font-size: 20rem;
        color: rgb(176, 180, 184);
        line-height: 20rem;
    }
    .container .percent .service{
        width: 474rem;
        font-size: 24rem;
        color: rgb(7, 17, 27);
        line-height: 36rem;
    }
    .container .percent .service .serviceContainer{
        margin: 36rem 48rem;
        }
        .container .percent .service .serviceContainer .item{
        display: flex;
        margin-bottom: 16rem;
        }
    .container .percent .service .serviceContainer .item{
        display: flex;
        margin-bottom: 16rem;
    }
    .container .percent .service .serviceContainer .item .starArea{
        display: flex;
        margin: 0 24rem;
    }
    .container .percent .service .serviceContainer .item .starArea .starImg{
        background: url('./img/star36_on@2x.png') no-repeat;
        background-size: cover;
        width: 36rem;
    }
    .container .percent .service .serviceContainer .item .time{
        margin-left: 24rem;
        color: rgb(147, 153, 159);
    }
    .container .classify{
        margin-top: 35rem;
        background-color: #fff;
        border-bottom:  1rem solid #f2f2f3;
    }
    .container .classify ul{
        display: flex;
        padding:36rem 0;
        margin: 0 36rem;
        border-bottom: 1rem solid #f2f2f3;
    }
    .container .classify ul li{
        width: 120rem;
        height: 65rem;
        margin-right: 20rem;
        font-size: 24rem;
        text-align: center;
        line-height: 65rem;
    }
    .container .classify ul li:nth-child(1){
        background-color: #00a0dc;
        color: #fff;
    }
    .container .classify ul li:nth-child(2){
        background-color: #ccecf8;
    }
    .container .classify ul li:nth-child(3){
        background-color: #e9ebec;
    }
    .container .classify .select{
        display: flex;
        color: #b7bbbf;
        padding:30rem 0;
        margin: 0 36rem;
    }
    .container .classify .select .layout-check_circle{
        font-size: 40rem;
        margin-right: 15rem;
    }
    .container .classify .select .desc{
        font-size: 24rem;
        line-height: 24rem;
        align-self: center;
    }
    .container .list{
        width: 100%;
        background-color: #fff;
    }
    .container .list .details{
        padding: 0 36rem
    }
    .container .list .item{
        display: flex;
        border-bottom:  1rem solid #f2f2f3;
        padding: 36rem 0 ;
    }
    .container .list .item .avatar{
        margin-right: 24rem;
        width: 56rem;
        height: 56rem;
        border-radius:50%;
        background-size: cover;
    }
    .container .list .item .content{
        flex: 1;
        }
    .container .list .item .content .nameAndTime{
        display: flex;
        justify-content: space-between;
        font-size: 20rem;
        line-height: 24rem;
    }
    .container .list .item .content .nameAndTime .name{
        color: rgb(7, 17, 27);
    }
    .container .list .item .content .nameAndTime .time{
        color: rgb(147, 153, 159);
        font-weight: 200;
    }
    .container .list .item .content .starAndtrans{
        margin-top:8rem;
        margin-bottom:12rem;
        display: flex;
    }
    .container .list .item .content .starAndtrans .starList{
            margin-right: 12rem;
        }
    .container .list .item .content .starAndtrans .starList .starItem{
        margin-right: 12rem;
        width: 24rem;
        height: 24rem;
        background: url('./img/star36_on@2x.png') no-repeat;
        background-size: cover;
    }
    .container .list .item .content .starAndtrans .trans{
        font-size: 20rem;
        font-weight: 200;
        color: rgb(147,153,159);
        line-height: 24rem;
    }
    .container .list .item .content .desc{
        font-size: 24rem;
        color: rgb(7, 17, 27);
        line-height: 36rem;
    }
    .container .list .item .content .goods{
        display: flex;
        margin-top: 16rem;
    }
    .container .list .item .content .goods .isLike.layout-thumb_up{
        font-size: 24rem;
        color: rgb(0,160,220);
        margin-right: 16rem;
        align-items: center;
        text-align: center;
        height: 36rem;
        line-height: 36rem;
    }
    .container .list .item .content .goods .isLike.layout-thumb_down{
        font-size: 24rem;
        color: rgb(183,187,191);
        margin-right: 16rem;
        align-items: center;
        text-align: center;
        height: 36rem;
        line-height: 36rem;
    }
    .container .list .item .content .goods .goodsList{
        display: flex;
        flex-wrap: wrap;
    }
    .container .list .item .content .goods .goodsList .goodsItem{
        width: 127rem;
        padding:0 12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 18rem;
        color: rgb(147,153,159);
        line-height: 32rem;
        border: 1px solid rgb(7, 17, 27,0.1);
        border-radius: 2rem;
        margin-right: 16rem;
        align-self: center;
    }
</style>